<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <!-- Meta, title, CSS, favicons, etc. -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="avalonjs - 迷你简单易用的前端MVVM框架，让你的网站更快更炫更好用">
        <meta name="keywords" content="MVVM, CSS, JavaScript, framework, avalon, web development">
        <meta name="author" content="RubyLouvre,司徒正美">


        <title>avalon中文文档</title>
        <script src="//files.cnblogs.com/files/rubylouvre/avalon.shim.js"></script>

        <!-- Bootstrap core CSS -->
        <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

        <link href="../../assets/css/patch.css" rel="stylesheet">

        <!-- Documentation extras -->

        <link href="../../assets/css/docs.min.css" rel="stylesheet">
        <style>
            body,html{
               overflow-y: hidden;
            }
        </style>
        <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script>
        <script src="../../assets/js/ie-emulation-modes-warning.js"></script>
        <![endif]-->
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

        <!-- Favicons -->
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
        <link rel="icon" href="/favicon.ico">

    </head>
    <body>




        <div class="container bs-docs-container">

            <div class="row">
                <div class="col-md-9" role="main">

<h2 ms-skip>数据填充(ms-text, ms-html, {{prop}}, {{prop|html}})</h2>


<p>本章节介绍<a href="https://github.com/RubyLouvre/avalon">avalon</a>最简单的功能，将数据打印到页面上。
    这是所有后端模板最基本的功能，然后加上each， if， include等语法，实现更精细的制定。
    <a href="https://github.com/RubyLouvre/avalon">avalon</a>通过绑定属性，其实将整个页面变成一个动态模板(详看<a href="http://www.html-js.com/article/Mini-MVVM-framework-Avalon-meditation-third-dynamic-template">这里</a>)。将数据输出到页面涉及到以下指令。</p>

<ul ms-skip>
    <li>{{prop}}</li>
    <li>{{prop|html}}</li>
    <li>ms-text</li>
    <li>ms-html</li>
    <li>ms-value</li>
    <li>ms-duplex</li>
</ul>

<p>{{prop}}是最简单实用的指令，什么hello world用它做最适合了。</p>

<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:html;gutter:false;toolbar:false'>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
    &lt;script src="avalon.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        avalon.define({
            $id: "test",
            word: "Hello Avalon"
        })
    &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div ms-controller="test"&gt;
        &lt;h1&gt;{{word}}!!!!!&lt;/h1&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</pre></div>

<p><img src="../../assets/css/directives/text/1409228882210-text4.jpg" /></p>

<p ms-skip>{{prop | html}}其实是加一个<strong>过滤器</strong>，也只有文本节点中的插值表达式可以加各种过滤器实现各种功能。
    html过滤器就是将此字符串转换为一个文档碎片再插入当前位置。此 外，这个{{prop|html}}，框架还是对它开了小灶，允许它本来就是一个文档碎片或元素节点或NodeList。
    如果是一个元素节点，将会将它的子节点然后抽出来，放到一个空文档碎片中。如果是一个NodeList，也会将它的所有元素放到一个空文档碎片中。
    换言之，殊途同归，都以文档碎片进行操作单元。

</p>

<p ms-skip>ms-text与ms-html其实就是{{prop}}、{{prop|html}}的真身，框架内部都是走同一处理函数。不过ms-text、 ms-html作为一个绑定属性，必须附于元素节点之上，因此没有前者那么方便。</p>

<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:html;gutter:false;toolbar:false'>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
    &lt;script src="avalon.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        avalon.define("test", function(vm) {
            vm.text = "&lt;b&gt; 1111  &lt;/b&gt;"
        })
    &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div ms-controller="test"&gt;
        &lt;div&gt;&lt;em&gt;用于测试是否被移除&lt;/em&gt;xxxx{{text}}yyyy&lt;/div&gt;
        &lt;div&gt;&lt;em&gt;用于测试是否被移除&lt;/em&gt;xxxx{{text}}yyyy&lt;/div&gt;
        &lt;div ms-text="text"&gt;&lt;em&gt;用于测试是否被移除&lt;/em&gt;xxxx yyyy&lt;/div&gt;
        &lt;div ms-html="text"&gt;&lt;em&gt;用于测试是否被移除&lt;/em&gt;xxxx yyyy&lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</pre></div>

<p><img src="../../assets/css/directives/text/1409224270310-text1.jpg" alt="enter image description here" title /></p>

<p ms-skip>此外，我们还可以通过config方法，更改插值表达式的界定符，因为{{}}可能被其他框架的模板所占用。建议界定符的长度大于1，不要设置为&gt;&gt;这样的位操作符。比如在DOMReady之前，我们调用如下语句：</p>

<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:javascript;gutter:false;toolbar:false'>avalon.config({
    interpolate: ["&lt;%", "%&gt;"] //  要求openTag 不等于closeTag就能配置成功
})</pre></div>

<p><img src="../../assets/css/directives/text/1409224391382-text2.jpg" alt="enter image description here" title /></p>

<p>像上面那样，由于网速慢把插值表达式暴露出来的问题， 我们可以定义这样一个样式规则进行处理，这有点类于angularjs的ng-cloak指令，在扫描之前起着羞丑布的作用。当扫描过后，框架会去掉绑定属性，及ms-controller、ms-important这两个类名，它们就显示出来了。</p>

<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:css;gutter:false;toolbar:false'>.ms-controller,
.ms-important {
    visibility: hidden
}</pre></div>
<div class="bs-callout bs-callout-success" ms-skip >
    <p>我们还可以首屏使用ms-text、 ms-html代替{{prop}}、 {{prop|html}}。在1.3.8中，
        它们也支持<strong>过滤器</strong>了，因此它们四个完全可以互换。</p>

</div>
<p>上述四种指令是用在文本节点上，但数据还能通过表单元素的value值显示出来，于是有了ms-value指令。ms-value为了应对复杂的显示，也支持插值表达式，但里面不能使用过滤器。</p>


<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:html;gutter:false;toolbar:false'>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
    &lt;script src="avalon.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        avalon.define({
            $id: "test",
            text: "&lt;b&gt; 1111  &lt;/b&gt;"
        })
    &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div ms-controller="test"&gt;
        &lt;input ms-value="text" /&gt;
        &lt;textarea ms-value="xxxxxxxx{{text+'!!'}}yyyyyyyy" /&gt;&lt;/textarea&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</pre></div>

<p><img src="../../assets/css/directives/text/1409224769410-text3.jpg" alt="enter image description here" title /></p>

<p>上面的功能，后端模板与前端模板也能做到，但ms-duplex就逆天了。它是avalon实现双向绑定的一个重要绑定。这个在其他章节详述。</p>



</div>
<div class="col-md-3" role="complementary">

</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="../../assets/highlight/shCore.js"></script>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

